<template>
  <section class="w3l-grids">
    <div>
      <div class="container py-lg-3">
        <div
          class="headerhny-title"
          style="
            border-style: solid;
            border-width: 0px 1px 1px 1px;
            border-color: rgba(105, 105, 105, 0.137);
          "
        >
          <div>
            <a-table
              :columns="columns"
              :data-source="page.list"
              :pagination="pagination"
              @change="handleTableChange"
              style="margin-top: 90px"
            >
            </a-table>
            <a-form
              :model="parameter"
              :label-col="{ span: 0 }"
              :wrapper-col="{ span: 10 ,offset:21}"
            >
              <div label="请您将对本平台的意见写在下方：" class="biaoti2">
                请您将对本平台的意见写在下方：
              </div>
              <a-col span="22" offset="1">
                              <a-textarea :rows="5" v-model:value="parameter.feedback_text" />
              </a-col>

              <a-form-item>
                <div
                  style="
                    width: 30px;
                    float: left;
                    margin-left: 15px;
                    margin-top: 15px;
                  "
                >
                                    <button
                    class="ant-btn ant-btn-red"
                    @click="feedback"
                    style="width: 100px; height: 40px; font-size: 18px；"
                  >
                    提交
                  </button>

                </div>
              </a-form-item>
            </a-form>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.biaoti {
  font-size: 22px;
  color: rgba(0, 0, 0, 0.8);
  margin-left: 30px;
  margin-bottom: 15px;
  width: 13%;
  border-style: solid;
  border-width: 0px 0px 4px 0px;
  border-color: rgba(24, 144, 255, 0.497);
}
.biaoti2 {
  font-size: 17px;
  color: rgba(0, 0, 0, 0.8);
  margin-left: 10px;
  margin-bottom: 15px;
  margin-top: 15px;
  width: 40%;
  border-style: solid;
  border-width: 0px 0px 0px 4px;
  border-color: rgba(24, 144, 255, 0.497);
  padding: 5px;
}
.ant-btn-primary {
  color: #fff;
  background-color: #1890ff;
  border-color: #1890ff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
.ant-btn-red {
  color: #fff;
  background-color: #1890ff;
  border-color: #1890ff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}
</style>


<script setup>
import { reactive, ref } from "vue";
import { get, post, tip } from "@/common"; //基础
//获取反馈
const columns = [
  {
    dataIndex: "feedback_text",
    title: "反馈内容",
    ellipsis: true,
  },
  {
    dataIndex: "feedback_time",
    title: "反馈时间",
    ellipsis: true,
  },
  {
    dataIndex: "platform_manager_username", //服务端数据
    title: "反馈管理员", //表头数据
    ellipsis: true,
  },
  {
    dataIndex: "feedback_reply",
    title: "管理员回复",
    wrapperCol: { span: 1 },
  },
];
//分页处理-start
const query = reactive({}); //定义查询参数

const page = ref({}); //接收服务端返回的分页对象

//分页引擎
const pagination = reactive({
  current: 1, //当前页
  pageSize: 7, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "7", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

//获取当前分页
const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;
  get("/user/info").then((res) => {
    query.cust_username = res.data.cust_username;
    get("/user/feedback", query).then((res) => {
      page.value = res.data; //将服务端传来的分页数据赋值予page
      //更新分页引擎
      pagination.current = page.value.current;
      pagination.pageSize = page.value.pageSize;
      pagination.total = page.value.total;
    });
  });
};
getPage(1); //页面加载是，首先加载第一页

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};

//分页处理-end
//提交反馈

const parameter = reactive({
  cust_username: "",
  feedback_text: "",
});

const feedback = () => {
  get("/user/info").then((res) => {
    parameter.cust_username = res.data.cust_username;
    post("/user/feedback/addFeedback", parameter).then((res) => {
      tip.success("反馈成功，我们会及时处理您的消息。");
      parameter.feedback_text = "";
      getPage(
        Math.trunc(
          (pagination.total + pagination.pageSize - 1) / pagination.pageSize + 1
        )
      );
    });
  });
};
</script>